<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<script>
			function checkForm(){
				//alert("aa");
				/**校验用户名*/
				//1.获取用户输入的数据
				var uValue = document.getElementById("sid").value;
				//alert(uValue);
				if(uValue==""){
					//2.给出错误提示信息
					alert("用户名不能为空!");
					return false;
				}
				/*校验密码*/
				var pValue = document.getElementById("password").value;
				if(pValue==""){
					alert("密码不能为空!");
					return false;
				}
				/**校验确认密码*/
				var rpValue = document.getElementById("repassword").value;
				if(rpValue!=pValue){
					alert("两次密码输入不一致!");
					return false;
				}
				/*校验姓名*/
				var unValue = document.getElementById("username").value;
				if(unValue==""){
					alert("姓名不能为空!");
					return false;
				}
				//检验性别
				sex = document.getElementsByName("sex");
				b=true;
				for(i=0;i<sex.length;i++){
					if (sex[i].checked){
						b=false;
						break;
					}
				} 
				if(b){
					alert("性别选项不能为空!")
					return false;
				}
				/*校验邮箱*/
				var eValue = document.getElementById("eamil").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
					alert("邮箱格式不正确!");
					return false;
				}
				/*校验班别*/
				var clValue = document.getElementById("class").value;
				if(clValue==""){
					alert("班别不能为空!");
					return false;
				}
				/*校验院系专业*/
				var prValue = document.getElementById("profession").value;
				if(prValue==""){
					alert("院系专业不能为空!");
					return false;
				}
			}
		</script>
		<script>
			function showTips(id,info){
				document.getElementById(id+"span").innerHTML="<br/><font color='gray'>"+info+"</font>";
			}
			function check(id,info){
				//1.获取用户输入的用户名数据
				var uValue = document.getElementById(id).value;
				//2.进行校验
				if(uValue==""){
					document.getElementById(id+"span").innerHTML="<br/><font color='red'>"+info+"</font>";
				}else{
					document.getElementById(id+"span").innerHTML="";
				}
			}
		</script>
		<script type="text/javascript">
			window.onload=function(){
				//登录失败提示
				var tips="<%=request.getParameter("parm2")%>"
				if(tips=='usernameErro'){
					var uValue = document.getElementById("tips").value="用户名已存在！";
				}
			}
		</script>
		<style>
			#returnA:hover{
					background-color: black;
			}
		</style>
		
	</head>
	<!--用户注册页面  -->
	<body style="background-color: #1D3647;color:white">
		<table border="1px" align="center" width="800px"  style="background-color: #0D3647;">
			
			<!--第一部分开始-->
			<tr height="50px">
				<td bgcolor="#12D3647">
					<a href="/classStudentMS/login.jsp" id="returnA" style="text-decoration: none;margin-left:10px;">
						<font size="5" color="white">班级学生管理系统</font>
					</a> 
				</td>
			</tr>
			<!--第一部分结束-->
			
			<!--第二部分开始-->
			<tr>
				<td height="440px" >
					<form action="/classStudentMS/registServlet" method="POST" name="regForm" onsubmit="return checkForm()">
						<table border="1px" width="320px" height="400px" align="center" bgcolor="#1D3647">
							<tr height="40px" align="center">
								<td colspan="2">
									<font size="4">用户注册</font> &nbsp;&nbsp;&nbsp;USER REGISTER 
								</td>
							</tr>
							<tr>
								<td>用户名</td>
								<td>
									<input type="text" name="sid"  size="20px" id="sid" onfocus="showTips('sid','用户名必填！')" onblur="check('sid','用户名不能为空！')"/>
									<span id="sidspan"></span>
								</td>
							</tr>
							<tr>
								<td>密码</td>
								<td>
									<input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填')" onblur="check('password','密码不能为空!')"/>
									<span id="passwordspan"></span>
								</td>
							</tr>
							<tr>
								<td>确认密码</td>
								<td>
									<input type="password" size="34px" id="repassword"></input>
								</td>
							</tr>
							<tr>
								<td>姓名</td>
								<td>
									<input type="text" id="username" name="username" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>性别</td>
								<td>
									<input type="radio" id="male" name="sex" value="男" />男
									<input type="radio" id="female" name="sex" value="女"/>女
								</td>
							</tr>
							<tr>
								<td>Email</td>
								<td>
									<input type="text" name="email" size="34px" id="eamil"/>
								</td>
							</tr>
							<tr>
								<td>班别</td>
								<td>
									<input type="text" name="class" size="34px" id="class" />
								</td>
							</tr>
							<tr>
								<td>院系专业</td>
								<td>
									<input type="text" name="profession" size="34px" id="profession" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="submit" value="注册" style="margin-left:137px;"/>
									<!--提示信息  -->
									<input type="text" id="tips" value="" size="10"  style="color:red;background-color: #1D3647;border:none;margin-right:10px;font-size:10px;"/>
								</td>
							</tr>
						</table>
					</form>
				</td>				
			</tr>
			<!--第二部分结束-->
			
		</table>
	</body>
</html>
